<template>
  <el-dropdown
    class="nav-international"
    placement="left-start"
    @command="handleSetLanguage"
  >
    <span class="nav-international__title">
      <ht-icon name="global" />
      {{ $t('ht.selectLang.switchLang') }}
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="$i18n.locale === 'zh-CN'" command="zh-CN">
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="$i18n.locale === 'zh-TW'" command="zh-TW">
        中文繁体
      </el-dropdown-item>
      <el-dropdown-item :disabled="$i18n.locale === 'en-US'" command="en-US">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  export default {
    name: 'LangSelect',
    computed: {
      language() {
        return localStorage.getItem('lang') || 'zh-CN'
      },
    },
    methods: {
      handleSetLanguage(lang) {
        this.$i18n.locale = lang
        this.$validator.locale = lang

        localStorage.setItem('lang', lang)
        this.$message({
          message: '切换成功',
          type: 'success',
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .nav-international {
    font-size: 13px;
    margin-left: 18px;
    cursor: pointer;

    .nav-international__title {
      font-size: 13px;
      color: #aaa;
    }
  }
</style>
